<template>
  <div id="sweets">
    <div class="sweets-banner">
      <img src="../../../assets/sweets_banner.png" alt>
    </div>
    <!-- scroll 滚动 -->
    <Scroll
      ref="BScroll"
      height="300"
      @downCallback="downCallback"
      @upCallback="upCallback($event)"
    >
      <div class="sweets-list">
        <ul>
          <li v-for="(item,index) in sweetsLists" :key="index">
            <div class="list-left">
              <div class="icon">
                <img :src="item.icon" alt>
              </div>
              <div class="list-text">{{item.text}}</div>
            </div>
            <div class="list-right">
              <p class="list-nums">{{item.typeNum}}</p>
              <p class="list-date">{{item.date}}</p>
            </div>
          </li>
        </ul>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from "components/BScroll";
import { logCandy } from "api";
import { setTimeout } from "timers";
import { constants } from "crypto";
export default {
  name: "sweets",
  data() {
    return {
      sweetsLists: [
        {
          icon: require("../../../assets/sweets_icon.png"),
          text: this.$t("sweets.listitem"),
          typeNum: "0.41EOC",
          date: "2019-1-3  14:00:37"
        },
        {
          icon: require("../../../assets/sweets_icon.png"),
          text: this.$t("sweets.listitem"),
          typeNum: "0.41EOC",
          date: "2019-1-3  14:00:37"
        },
        {
          icon: require("../../../assets/sweets_icon.png"),
          text: this.$t("sweets.listitem"),
          typeNum: "0.41EOC",
          date: "2019-1-3  14:00:37"
        },
        {
          icon: require("../../../assets/sweets_icon.png"),
          text: this.$t("sweets.listitem"),
          typeNum: "0.41EOC",
          date: "2019-1-3  14:00:37"
        },
        {
          icon: require("../../../assets/sweets_icon.png"),
          text: this.$t("sweets.listitem"),
          typeNum: "0.41EOC",
          date: "2019-1-3  14:00:37"
        }
      ]
    };
  },
  methods: {
    upCallback(pageInfo) {
      this.$refs.BScroll.upSuccess(true);
      this.$msg("加载成功");
    },
    downCallback() {
      this.$refs.BScroll.successFn();
      this.$msg("刷新成功");
    }
  },
  components: {
    Scroll
  },
  mounted() {
    this.$post(logCandy, { page: 1, pageSize: 10 }).then(res => {
      console.log(res);
    });
  }
};
</script>

<style lang="stylus" scoped>
@import '../../../utils/styl/mixin.styl'
#sweets
  positCenter(0, 0, 0, 0, 0, 0)
  overflow-y hidden
  width 100%
  background-color $sweetsBg
  .sweets-banner
    height rem(360)
    background-color #F3F5F8
    width 100%
    img
      width 100%
  .sweets-list
    ul
      li
        box-sizing border-box
        padding 0 rem(25)
        display flex
        justify-content space-between
        align-items center
        width 100%
        height rem(57)
        background-color $listBg
        margin-bottom rem(4)
        .list-left
          display flex
          justify-content space-between
          align-items center
          .icon
            width rem(16)
            height rem(16)
            img
              width 100%
              height 100%
        .list-text
          margin-left rem(10)
          font-size rem(18)
          color $fontColor
        .list-right
          display flex
          flex-direction column
          color $tabBarColor
          text-align right
          .list-nums
            font-size rem(18)
            color $typeColor
            line-height rem(24)
</style>
